<template>
<div :class="$style.container">
  <section>
    <div :class="$style.left">
      <img v-lazy="avatar"/>
    </div>
    <div :class="$style.right">
      <h4>{{username}}</h4>
      <p>用户名: {{username}}</p>
    </div>
  </section>
</div>
</template>
<script>
export default {
  data () {
    return {
      username: this.$store.getters.user.name
    }
  },
  computed: {
    avatar () {
      let img = this.$prefix + 'downLoadFile?fileId=' + this.$store.getters.user.avatar
      return img
    }
  }
}
</script> 
<style lang="less" module>
.container {
  background: #fff;
  padding: 10px;
  section {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 30px 20px;
    box-sizing: border-box;
    width: 355px;
    height:120px;
    background: linear-gradient(90deg,#eb3c3c,#ff7459);
    box-shadow: 0 2px 4px rgba(228,57,60,.4);
    border-radius: 6px;
    .left {
      margin-right: 10px;
      img {
        width: 60px;
        height:60px;
        border-radius: 50%;
      }
    }
    .right {
      h4 {
        color: #fff;
        font-size: 20px;
      }
      p {
        color: hsla(0,0%,100%,.7);
        display: block;
        font-size: 12px;
        margin-top: 4px;
        width: 184px;
      }
    }
  }
}
</style>